a!doctype html>
<html lang="en" ng-app=explorer>
<head>
	<!--script src = "/Chart.min.js"></script-->
	<link rel="stylesheet" type="text/css" href="/css/app.css">
	<link rel="stylesheet" type="text/css" href="/animate.css/animate.min.css">
	<link rel="stylesheet" type="text/css" href="/bootstrap/dist/css/bootstrap.min.css">
	<link rel="stylesheet" type="text/css" href="/font-awesome/css/font-awesome.min.css">

	<!-- vendor scripts -->
	<script src = "/js/Chart.min.js"></script>
	<script src = "/socket.io-client/dist/socket.io.js"></script>
	<script src="/jquery/dist/jquery.min.js"></script>
	<script src = "/angular/angular.js"></script>
	<script src = "/angular-route/angular-route.js"></script>
	<script src = "/js/d3.v2.js"></script>

	<!-- App scripts -->
	<script src = "/js/controllers.js"></script>
	<script src = "/js/directives.js"></script>
	<script src = "/js/services.js"></script>
	<script src = "/js/app.js"></script>
	<!--script src = "/js/explorer.min.js"></script-->
	<title> 区块链后台监控系统 </title>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">

	<div id="header" class="Header">
		<h1><i class="fa fa-connectdevelop" aria-hidden="true"></i>&nbsp;区块链后台监控系统</h1>
	</div>
</head>

<body onresize="restore()">
	<div  class="menu-trigger" ng-controller="TRIGGER" >
		<button class="menu-button" id="button" ng-click="activate()"> Menu </button>
	</div>

	<div id="navigation" class="Navigation">
		<u1>
			<li><a href="#A" onClick="hide()" ><i class="fa fa-cubes fa-lg" aria-hidden="true"></i>&nbsp;最新区块</a></li>
			<li><a href="#B" onClick="hide()" ><i class="fa fa-object-group fa-lg" aria-hidden="true"></i>&nbsp;当前状态</a></li>
			<li><a href="#D" onClick="hide()" ><i class="fa fa-connectdevelop fa-lg" aria-hidden="true"></i>&nbsp;区块链网络</a></li>
			<li><a href="#E" onClick="hide()" ><i class="fa fa-dashboard fa-lg" aria-hidden="true"></i>&nbsp;图形化显示</a></li>
			<li><a href="#F" onClick="hide()" ><i class="fa fa-arrows-alt fa-lg" aria-hidden="true"></i>&nbsp;区块链事务</a></li>
		</u1>
	</div>

	<section id="block" class="Block" ng-controller="BLOCKS">
		<a name="A"></a>
		<div class="Block_title">
			<h1><i class="fa fa-cubes" aria-hidden="true"></i>&nbsp;<b>最新区块</b></h1>
		</div>
		<div class="Loading_symbol" ng-show="loader.loading">Loading...</div>
		<table>
			<thead>
				<tr>
					<th> 区块号 </th>
					<th> 区块hash </th>
					<th> 之前的Hash </th>
					<th> 详情</th>
				</tr>
			</thead>
			<tbody>
				<!--tr ng-repeat="n in range" class="{{ info[$index].cssClass }}"-->
				<tr ng-repeat="n in range">
					<td data-label="Block#"> {{ info[$index].blockNum }} </td>
					<td data-label="State Hash"> {{ info[$index].stateHash | limitTo: 17 }}... </td>
					<td data-label="Previous Hash">{{ info[$index].previousBlockHash | limitTo: 17}}...</td>
					<td data-label="Log">
						<button ng-click="Update_selected_block($index)"> 查看 </button>
						<form action='#openModal2' id="change2" style="display:none;">
							<input type="submit" value="Details">
						</form>
						<div id="openModal2" class="modalDialog" style="font-size: 120%; text-align:left;">
							<div>
								<a href="#close" title="Close" class="close">X</a>
								<h2 style="text-align:center">Block {{infoc.blockNum}} </h2><hr/>
								<h2 style="text-align:center" > Full Hash </h2>
								<p> <b> State Hash: </b>  {{ infoc.stateHash}} </p>
								<p> <b> Previous Hash: </b> {{ infoc.previousBlockHash }} </p>
								<hr>
								<h2 style="text-align:center">Transaction Information</h2>
								<h4>Total number of transactions: {{ infoc.transactions.length }} </h4>
								<div ng-repeat="transaction in infoc.transactions">
									<p style="text-align:center"> <b>Transaction#</b> {{ $index+1 }} </p>
									<p> <b>timestamp:</b> {{ transaction.timestamp}} </p>
									<p> <b>UUID:</b> {{ transaction.txId }} </p>
									<p> <b>Signature:</b> {{ transaction.signature }} </p>
									<p> <b>channel Id:</b> {{transaction.channelId}}</p>
									<p> <b>Chaincode Id:</b> {{transaction.chaincodeId }}</p>
									<p> <b>Arguments:</b> {{ transaction.args}} </p>
									<hr>
								</div>
							</div>
						</div>
					</tr>
				</tbody>
			</table>
		</section>
		<section id="current" class="Current" ng-controller="CURRENT">
			<a name="B"></a>
			<div  class="Block_title">
				<h1> <b> <i class="fa fa-object-group" aria-hidden="true"></i>&nbsp;当前状态</b> </h1>
			</div>
			<div class="Current_info">
				<text> <b>高度: </b> {{ info.height }} </text>
				<p> <b>区块Hash:</b> {{ info.currentBlockHash }} </p>
				<p> <b>之前的Hash:</b> {{ info.previousBlockHash }} </p>
			</div>
		</section>
		<section id="network" class="Network" ng-controller="NETWORK">
			<a name="D"></a>

			<div class="Block_title">
				<h1><b><i class="fa fa-connectdevelop" aria-hidden="true"></i>&nbsp;区块链网络信息</b></h1>
			</div>
			<p style="padding-left:20px;">网络中的节点数:  {{ peers.length}}</p>
			<div class="Network_child">
				<table>
					<thead>
						<tr>
							<th> 名字 </th>
							<th> 地址</th>
							<th> 类型</th>
							<th> PKIID</th>
						</tr>
					</thead>
					<tbody>
						<tr ng-repeat="peer in peers" >
							<td data-label="Name"> <i class="fa fa-chain" style="font-weight:bold;color:#00ff00" aria-hidden="true"></i>&nbsp;{{peer.name}} </td>
							<td data-label="Address"> {{peer.address }}  </td>
							<td data-label="Type"> {{peer.type}} </td>
							<td data-label="PKIID"> {{peer.pkiID}} </td>
						</tr>
					</tbody>
				</table>
			</div>
		</section>
		<section id="block-animated"  ng-controller="bcBlocks" >
			<div id="block-container" class="row container">
				<div class='col-xs-1' ng-repeat="blk in blocks" ng-click='select($index)'>
					<div class="blk animated fadeInRight">{{blk}}</div>
				</div>
			</div>
			<form action='#openModal-block' id="select-block" style="display:none;">
				<input type="submit" value="Details">
			</form>
			<div id="openModal-block" class="modalDialog" style="font-size: 120%; text-align:left;">
    			<div>
    				<a href="#close" title="Close" class="close">X</a>
    				<h2 style="text-align:center">Block {{infoc.blockNum}} </h2><hr/>
    				<h2 style="text-align:center" > Full Hash </h2>
    				<p> <b> State Hash: </b>  {{ infoc.stateHash}} </p>
    				<p> <b> Previous Hash: </b> {{ infoc.previousBlockHash }} </p>
    				<hr>
    				<h2 style="text-align:center">Transaction Information</h2>
    				<h4>Total number of transactions: {{ infoc.transactions.length }} </h4>
    				<div ng-repeat="transaction in infoc.transactions">
    					<p style="text-align:center"> <b>Transaction#</b> {{ $index+1 }} </p>
    					<p> <b>timestamp:</b> {{ transaction.timestamp}} </p>
    					<p> <b>UUID:</b> {{ transaction.txId }} </p>
    					<p> <b>Signature:</b> {{ transaction.signature }} </p>
    					<p> <b>channel Id:</b> {{transaction.channelId}}</p>
    					<p> <b>Chaincode Id:</b> {{transaction.chaincodeId }}</p>
    					<p> <b>Arguments:</b> {{ transaction.args}} </p>
    					<hr>
    				</div>
    			</div>
	        </div>        
		</section>
		<section id="network-animated">
		</section>

		<section id="graph" class="Graph" onmouseover="lock();" onmouseout="redraw();">
			<a name="E"></a>
			<div class="Block_title">
				<h1><b><i class="fa fa-dashboard" aria-hidden="true"></i>&nbsp;图像化显示</b></h1>
			</div>
			<div style="width:100%">
				<div id="performance" class="Performance" ng-controller="GRAPH">
					<div id="top" class="Top" style="margin-left:0px">
						<h2> <i class="fa fa-wpforms" aria-hidden="true"></i>&nbsp;性能 </h2>
					</div>
					<table class="PerfData">
						<tr class="none">
							<td class="param">Time</td><td class="val">{{ checkTime }}</td>
						</tr>
						<tr class="none">
							<td class="param">Avg. Txn Latency</td><td class="val">{{ avgTxnLatency }}<span class="measure">ms</span>
							<i class="fa fa-arrow-up" style="color:#ff3300;" aria-hidden="true" ng-if="avgTxnLatencySc > 0"></i>
							<i class="fa fa-arrow-down" style="color:#00ff00;" aria-hidden="true" ng-if="avgTxnLatencySc < 0"></i>
							<i class="fa fa-minus" style="color:#3399ff;" aria-hidden="true" ng-if="avgTxnLatencySc == 0"></i>
						</td>
					</tr>
					<tr class="none">
						<td class="param">Transaction Rate</td><td class="val">{{ txnRate }} <span class="measure">/sec</span>
						<i class="fa fa-arrow-up" style="color:#00ff00; " aria-hidden="true" ng-if="txnRateSc > 0"></i>
						<i class="fa fa-arrow-down" style="color:#ff3300; " aria-hidden="true" ng-if="txnRateSc < 0"></i>
						<i class="fa fa-minus" style="color:#3399ff; " aria-hidden="true" ng-if="txnRateSc == 0"></i>
					</td>
				</tr>
				<tr class="none">
					<td class="param">Mining Rate</td><td class="val"> {{ mineRate }}<span class="measure">blocks/sec</span>
					<i class="fa fa-arrow-up" style="color:#00ff00; " aria-hidden="true" ng-if="mineRateSc > 0"></i>
					<i class="fa fa-arrow-down" style="color:#ff3300; " aria-hidden="true" ng-if="mineRateSc < 0"></i>
					<i class="fa fa-minus" style="color:#3399ff; " aria-hidden="true" ng-if="mineRateSc == 0"></i>
				</td>
			</tr>
		</table>
	</div>
	<div id="tx_rate_cont" ng-controller="TX_RATE" ng-mouseover="focus=true;" ng-mouseout="checkChg();">
		<div id="top" class="Top">
			<h2> <i class="fa fa-line-chart" aria-hidden="true"></i>&nbsp;事务频率 </h2>
		</div>
		<canvas id="tx_rate"></canvas>
	</div>

	<div id="blk_rate_cont" ng-controller="BLK_RATE">
		<div id="top" class="Top">
			<h2> <i class="fa fa-line-chart" aria-hidden="true"></i>&nbsp;区块生成频率 </h2>
		</div>
		<canvas id="blk_rate"></canvas>
	</div>
</div>
</section>
<section id="trans" class="Trans" ng-controller="TRANSACTIONS">
	<a name="F"></a>
	<div class="Block_title">
		<h1><b><i class="fa fa-arrows-alt" aria-hidden="true"></i>&nbsp;最新的事务</b></h1>
		<p> Display number of Transactions: <input type="number" step="1", min="1", max="{{trans.length}}", ng-model="row_amount2"/>
		</div>

		<div class="Loading_symbol" ng-show="loader.loading">Loading..</div>
		<table>
			<thead>
				<tr>
					<th> 来自区块 </th>
					<th> 时间</th>
					<th> ID </th>
					<th> UUID </th>
					<th> 详情 </th>
				</tr>
			</thead>
			<tbody>
				<tr ng-repeat="items in trans | limitTo: row_amount2" >
					<td data-label="Block# Origin">{{ trans[$index].origin}}</td>
					<td data-label="Timestamp">{{ trans[$index].timestamp}}</td>
					<td data-label="ID">{{trans[$index].chaincodeId | limitTo: 12}}</td>
					<td data-label="UUID">{{ trans[$index].txId | limitTo : 16}}...</td>
					<td data-label="Detail">

						<button ng-click="Update_transaction_selection_index($index)"> 查看 </button>
						<form action='#openModal3' id="change3" style="display:none">
							<input type="submit" value="Full Details">
						</form>

						<div id="openModal3" class="modalDialog" style="font-size: 120%; text-align:left;">
							<div>
								<a href="#close" title="Close" class="close">X</a>
								<h2 style="text-align:center" >Transaction Information</h2>
								<div>
									<p> <b>ID:</b> {{ transs.chaincodeId }} </p>
									<p> <b>Timestamp: </b> {{ transs.timestamp}} </p>
									<p> <b>UUID:</b> {{ transs.txId }} </p>
									<p> <b>Arguments:</b> {{ transs.args}} </p>
									<p> <b>Signature:</b> {{ transs.signature }} </p>
									<hr>
								</div>
							</div>
						</div>
					</td>
				</tr>
			</tbody>
		</table>
	</div>
</div>
</section>
</body>
<footer>
	<div class="Footer_content"></div>
</footer>
</html>
